<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>千峰教育大前端Vue教学</title>
  <!-- 引入vue -->
  <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body style="margin:100px;font-size:22px;">
  <!-- 定义一个容器 -->
  <div id="app">
    <!-- 入口只加载App -->
    <App></App>
  </div>
  <script>
    // 定义NameInput组件
    const NameInput = {
      template: `
      <input type="text" placeholder="请填写姓" :value="firstName" @input="$emit('update:firstName', $event.target.value)">
      <input type="text" placeholder="请填写名" :value="lastName" @input="$emit('update:lastName', $event.target.value)">
      `,
      props: ['firstName', 'lastName'], // 声明属性
      emits: ['update:firstName', 'update:lastName'], // 声明事件
    };
    //  
    // 定义App组件
    const App = {
      template: `
      <div>
        <div>你输入的是：姓： {{firstName}}， 名：{{lastName}}，全名：{{firstName}}{{lastName}}</div>
        <div><NameInput v-model:firstName="firstName" v-model:lastName="lastName" /></div>
      </div>
      `,
      components: {
        NameInput,
      },
      data() {
        return {
          firstName: '',
          lastName: '',
        };
      },
    };
    // 创建入口为App应用，其他的都为组件
    const app = Vue.createApp({ components: { App } });
    // 挂载应用
    app.mount('#app');
  </script>
</body>

</html>